<template>
  <div class="f-row f-align--center cursor-pointer" @click="$emit('click', $event)">
    <svg-icon :type="`theme-icons-${icon}`" size="14"></svg-icon>
    <div class="icon-text" :style="textStyle"><slot></slot></div>
  </div>
</template>
<script>
export default {
  name: "IconTextBtn",
  props: {
    icon: {
      require: true,
      default: "",
    },
    size: {
      type: String,
      default: "",
    },
  },
  computed: {
    textStyle() {
      const { size } = this;
      return size ? { fontSize: `${size}px` } : {};
    },
  },
};
</script>

<style lang="scss" scoped>
.icon-text {
  margin-left: 5px;
  font-size: var(--theme-font-size-primary);
  color: var(--theme-color-text-regular);
  line-height: 1;
}
</style>
